<template>
  <vue-scroll>
    <div class="otherPage">
      <el-radio-group v-model="radio" @change="handleData">
        <el-row class="otherRadio">
          <el-radio :label="'3'">使用临时库数据</el-radio>
        </el-row>
        <el-row class="otherRadio">
          <el-radio :label="'4'">使用上传的数据</el-radio>
          <div class="upload">
            <el-upload
              class="upload-demo"
              action="#"
              :http-request="httpRequest"
              :on-preview="handlePreview"
              accept=".xls,.xlsx"
              :on-success="handleSuccess"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">上传文件</el-button>
              <el-link type="primary" class="uploadMb" @click="uploadFile"
                >文件模板.xlsx</el-link
              >
            </el-upload>
            <div slot="tip" class="el-upload__tip">支持扩展名：.xls .xlsx</div>
          </div>
        </el-row>
      </el-radio-group>
    </div>
  </vue-scroll>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('charts')
export default {
  name: 'otherPage',
  data() {
    return {
      radio: '3',
      fileList: []
    }
  },
  methods: {
    // 下载模板文件
    uploadFile() {
      window.location.href =
        'http://file1.peopleyuqing.com/group1/M00/F4/87/CiYKql55scQAAAAAAAAmNldpTwA59.xlsx'
    },
    httpRequest(data) {
      this.setFormData({ data: { file: data.file } })
    },
    handleData(val) {
      this.setFormData({ data: { statSource: Number(val) } })
    },
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的csv文件
      }
    },
    handleSuccess(response, file, fileList) {
      this.setFormData({ data: { file: fileList[0] } })
    },
    handleRemove(file, fileList) {
      this.setFormData({ data: { file: fileList[0] } })
    },
    handlePreview(file) {},
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    ...mapMutations(['setFormData'])
  },
  mounted() {},
  computed: {
    ...mapState(['formData'])
  }
}
</script>

<style scoped>
.otherRadio {
  padding: 15px;
}
.upload {
  margin: 15px 26px;
}
.uploadMb {
  margin-left: 10px;
}
</style>
